<template>
  <span
    :title="props.title"
    class="appIconBox"
    :class="className"
    :style="{ width: props.size + 'px', height: props.size + 'px' }"
  >
    <svg
      class="appIcon"
      aria-hidden="true"
      :style="myStyle"
      @click="$emit('iconClick')"
    >
      <use :xlink:href="iconClassName" />
    </svg>
  </span>
</template>

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps<{
  className?: string;
  iconName: string;
  color?: string;
  size?: number;
  style?: any;
  title?: string;
}>();

const iconClassName = computed(() => {
  return `#${props.iconName}`;
});

const myStyle = computed(() => {
  let result;
  if (props.style) {
    result = { ...props.style };
  }
  if (props.size) {
    result = {
      ...result,
      width: `${props.size}px`,
      height: `${props.size}px`,
    };
  } else {
    result = {
      ...result,
      width: `24px`,
      height: `24px`,
    };
  }
  if (props.color) {
    result = {
      ...result,
      fill: props.color,
    };
  }
  return result;
});
</script>

<style scoped lang="less">
.appIconBox {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.appIcon {
  width: 24px;
  height: 24px;
}
</style>
